@charset "UTF-8";
@import "reset";

// 背景音乐按钮
.bgmbtn{
  position: fixed;
  width: 37px;
  height: 37px;
  top: 5.0%;
  right: 5%;
  z-index: 30;
  background: url("../img/bgmBtn.svg") no-repeat;
  background-size: contain;
}
.bgmbtn.rotate{
  animation: rotating 1.2s linear infinite;
}

#web {
  .page_c {
    background: url("../img/bg_3.jpg");
    position: relative;
    overflow: hidden;
    div {
      position: absolute;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  // 第一页
  .page1 {
    // 白色边框
    .border {
      width: 50%;
      top: -100%;
      left: 50%;
      margin-left: -25%;
    }
    // 妈妈背景图操作
    .mon_beiying {
      width: 38%;
      top: 39%;
      left: 56%;
      margin-left: -22.5%;
    }
    .mon_left_go1 {
      position: absolute;
      top: 0;
      left: -200%;
    }
    .mon_left_go2 {
      position: absolute;
      top: 0;
      left: -200%;
    }
    .mon_left_go3 {
      position: absolute;
      top: 0;
      left: -200%;
    }
    .mom_right_go1 {
      position: absolute;
      top: 0;
      right: -200%;
    }
    .mom_right_go2 {
      position: absolute;
      top: 0;
      right: -200%;
    }
    .mom_right_go3 {
      position: absolute;
      top: 0;
      right: -200%;
    }
    .mom_right_go4 {
      position: absolute;
      top: 0;
      right: -200%;
    }
    .mon_fangfa1 {
      position: absolute;
      left: 0;
      top: 0;
    }
    .mon_fangfa2 {
      position: absolute;
      left: 0;
      top: 0;
    }
    .mon_fangfa3 {
      position: absolute;
      left: 0;
      top: 0;
    }
    .mon_fangfa4 {
      position: absolute;
      left: 0;
      top: 0;
    }
    .mon_fangfa5 {
      position: absolute;
      left: 0;
      top: 0;
    }

    // 标题
    .page1_title {
      width: 87%;
      top: 10%;
      left: 50%;
      margin-left: -42.5%;
      opacity: 0;
    }

    // 四个小圆形操作
    .page1_circular {
      width: 60px;
      height: 60px;
      background-color: #fff;
      border: 2px solid #000;
      border-radius: 50%;
      text-align: center;
      p {
        width: 100%;
        font-size: 24px;
        margin-top: 20%;
      }
    }
    .page1_circular1 {
      left: 3%;
      top: 40%;
      opacity: 0;
    }
    .page1_circular2 {
      left: 3%;
      top: 60%;
      opacity: 0;
    }
    .page1_circular3 {
      right: 3%;
      top: 40%;
      opacity: 0;
    }
    .page1_circular4 {
      right: 3%;
      top: 60%;
      p {
        margin-top: 0;
      }
      opacity: 0;
    }

    // 两行文字操作
    .page1_word {
      width: 80%;
      height: 7%;
      background-color: #ffda00;
      text-align: center;
      left: 13%;
      bottom: 15%;
      line-height: 22px;
      p:nth-of-type(1) {
        font-size: 16px;
        position: absolute;
        left: 10%;
        top: -600%;
        opacity: 0;
      }
      p:nth-of-type(2) {
        font-size: 12px;
        position: absolute;
        left: 27%;
        top: -600%;
        opacity: 0;
      }
    }
  }
  // 第一页动画
  .page1.doIt {
    .border {
      animation: fall 600ms ease-out 200ms 1 normal forwards;
    }
    .mon_beiying_shake {
      animation: shake 100ms linear 0s infinite normal forwards;
    }
    .mon_left_go1 {
      animation: left_go 500ms ease-out 600ms 1 normal backwards;
    }
    .mon_left_go2 {
      animation: left_go 500ms ease-out 800ms 1 normal backwards;
    }
    .mon_left_go3 {
      animation: left_go 500ms ease-out 1000ms 1 normal backwards;
    }
    .mom_right_go1 {
      animation: right_go 500ms ease-out 600ms 1 normal backwards;
    }
    .mom_right_go2 {
      animation: right_go 500ms ease-out 800ms 1 normal backwards;
    }
    .mom_right_go3 {
      animation: right_go 500ms ease-out 1000ms 1 normal backwards;
    }
    .mon_right_go4 {
      animation: right_go 500ms ease-out 1600ms 1 normal backwards;
    }
    .mon_fangfa1 {
      animation: fangda 600ms linear 2200ms 1 normal forwards;
    }
    .mon_fangfa2 {
      animation: fangda 600ms linear 2600ms 1 normal forwards;
    }
    .mon_fangda3 {
      animation: fangda 600ms linear 3000ms 1 normal forwards;
    }
    .mon_fangfa4 {
      animation: fangda 600ms linear 5800ms 1 normal forwards;
    }
    .mon_fangfa5 {
      animation: fangda 600ms linear 6200ms 1 normal forwards;
    }
    .page1_title {
      animation: title_fangda 800ms ease-in 3200ms 1 normal forwards;
    }
    .page1_circular1 {
      animation: cir_show 600ms linear 4000ms 1 normal forwards;
    }
    .page1_circular2 {
      animation: cir_show 600ms linear 4400ms 1 normal forwards;
    }
    .page1_circular3 {
      animation: cir_show 600ms linear 4800ms 1 normal forwards;
    }
    .page1_circular4 {
      animation: cir_show 600ms linear 5200ms 1 normal forwards;
    }
    .page1_word {
      p:nth-of-type(1) {
        animation: word_fall1 600ms ease-out 5800ms 1 normal forwards;
      }
      p:nth-of-type(2) {
        animation: word_fall2 600ms ease-out 6200ms 1 normal forwards;
      }
    }
  }

  // 第二页
  .page2 {
    .page2_border {
      width: 45%;
      top: -200%;
      left: 48%;
      margin-left: -20%;
    }
    .page2_mon_gongji {
      width: 53%;
      top: 44%;
      left: 100%;
    }
    .page2_aDa {
      width: 30%;
      top: 56%;
      left: 100%;
      transform: rotate(35deg);
    }
    .page2_me {
      width: 47%;
      top: 50%;
      left: 100%;
    }
    .page2_phone {
      width: 12%;
      top: 65%;
      left: 100%;
    }
    .page2_title {
      width: 75%;
      top: -100%;
      left: 15%;
    }
    .page2_blood {
      width: 20%;
      top: 40%;
      left: 26%;
      opacity: 0;
    }
    .page2_word {
      width: 70%;
      height: 5%;
      bottom: 5%;
      left: -100%;
      font-size: 14px;
      color: #fff;
      border: 1px solid #000;
      background-color: #0d1744;
      text-align: center;
      line-height: 30px;
    }
  }
  // 第二页动画
  .page2.doIt {
    .page2_border {
      animation: page2_fall 400ms ease-out 0ms 1 normal forwards;
    }
    .page2_mon_gongji {
      animation: page2_muncoming 400ms ease-in 300ms 1 normal forwards;
    }
    .page2_aDa {
      animation: aDa 400ms ease-in 300ms 1 normal forwards;
    }
    .page2_me {
      animation: page2_dafei 400ms ease-in 400ms 1 normal forwards;
    }
    .page2_phone {
      animation: page2_phonefei 400ms ease-in 400ms 1 normal forwards;
    }
    .page2_title {
      animation: page2_title_fall 600ms linear 1200ms 1 normal forwards;
    }
    .page2_blood {
      animation: tuxue 600ms linear 2000ms 1 normal forwards;
    }
    .page2_word {
      animation: page2_word_show 600ms linear 2600ms 1 normal forwards;
    }
  }

  // 第三页
  .page3 {
    .page3_border {
      width: 45%;
      top: -100%;
      left: 50%;
      margin-left: -15%;
    }
    .page3_me {
      width: 72%;
      top: 43%;
      left: 100%;
    }
    .page3_han {
      width: 6%;
      top: 50%;
      left: 65%;
      transform: scale(0);
    }
    .page3_shadow {
      width: 65%;
      bottom: 16%;
      left: -100%;
    }
    .page3_mon_gongji {
      width: 71%;
      top: 44%;
      left: -100%;
    }
    .page3_title {
      width: 75%;
      top: -100%;
      left: 15%;
    }
    .page3_guangquan {
      width: 20%;
      bottom: 31%;
      left: 11%;
      transform: scale(0);
    }
    .page3_flashing {
      width: 35%;
      top: 42%;
      left: -4%;
      transform: rotate(10deg);
      opacity: 0;
    }
    .page3_word {
      width: 70%;
      height: 5%;
      bottom: 5%;
      left: -100%;
      font-size: 14px;
      color: #fff;
      border: 1px solid #000;
      background-color: #0d1744;
      text-align: center;
      line-height: 30px;
    }
  }
  // 第三页动画
  .page3.doIt {
    .page3_border {
      animation: page3_fall 400ms cubic-bezier(0, 0, 0.2, 1) 0ms 1 normal forwards;
    }
    .page3_me {
      animation: page3_mecoming 600ms linear 300ms 1 normal forwards;
    }
    .page3_han {
      animation: page3_hanshow 350ms linear 850ms 1 normal forwards;
    }
    .page3_shadow {
      animation: page3_shadowShow 600ms ease-in 1000ms 1 normal forwards;
    }
    .page3_mon_gongji {
      animation: page3_momcoming 600ms linear 1400ms 1 normal forwards;
    }
    .page3_title {
      animation: page3_title_fall 600ms linear 1500ms 1 normal forwards;
    }
    .page3_guangquan {
      animation: page3_guangquanda 800ms linear 2400ms 1 normal forwards;
    }
    .page3_flashing {
      animation: page3_flashShake 90ms linear 2800ms infinite normal forwards;
    }
    .page3_word {
      animation: page2_word_show 600ms linear 3000ms 1 normal forwards;
    }
  }

  // 第四页
  .page4 {
    .page4_border {
      width: 45%;
      top: -100%;
      left: 25%;
    }
    .page4_mon_gongji {
      width: 65%;
      top: 46%;
      left: -100%;
    }
    .BAoo {
      width: 40%;
      top: 46%;
      left: -100%;
      transform: rotate(-25deg);
    }
    .page4_me {
      width: 50%;
      top: 42%;
      left: -100%;
    }
    .page4_me_gost {
      width: 50%;
      top: 38%;
      left: 28%;
      opacity: 0;
    }
    .page4_mon_shadow {
      width: 45%;
      top: 74%;
      left: -100%;
    }
    .page4_me_shadow {
      width: 18%;
      top: 73%;
      left: -100%;
    }
    .page4_title {
      width: 75%;
      top: -100%;
      left: 15%;
    }
    .page4_word {
      width: 85%;
      height: 5%;
      bottom: 5%;
      left: -100%;
      font-size: 14px;
      color: #fff;
      border: 1px solid #000;
      background-color: #0d1744;
      text-align: center;
      line-height: 30px;
    }
  }
  // 第四页动画
  .page4.doIt {
    .page4_border {
      animation: page4_fall 400ms cubic-bezier(0, 0, 0.2, 1) 0ms 1 normal forwards;
    }
    .page4_mon_gongji {
      animation: page4_momcoming 600ms linear 400ms 1 normal forwards;
    }
    .BAoo {
      animation: BAoo_coming 600ms linear 400ms 1 normal forwards;
    }
    .page4_me {
      animation: page4_mecoming 600ms linear 600ms 1 normal forwards;
    }
    .page4_me_gost {
      animation: page4_gostshow 2000ms linear 1100ms infinite normal forwards;
    }
    .page4_mon_shadow {
      animation: monshadow 600ms linear 400ms 1 normal forwards;
    }
    .page4_me_shadow {
      animation: meshadow 600ms linear 600ms 1 normal forwards;
    }
    .page4_title {
      animation: page4_title_fall 600ms linear 1500ms 1 normal forwards;
    }
    .page4_word {
      animation: page2_word_show 600ms linear 3000ms 1 normal forwards;
    }
  }

  // 第五页
  .page5 {
    .page5_border {
      width: 51%;
      top: 45%;
      left: 25%;
    }
    .page5_mon_gongji {
      width: 85%;
      top: 44%;
      left: 100%;
    }
    .bakoko {
      width: 40%;
      top: 55%;
      left: 100%;
      transform: rotate(45deg);
    }
    .page5_me {
      width: 74%;
      top: 33%;
      left: 100%;
    }
    .me_shake {
      width: 74%;
      top: 33%;
      left: -22%;
      opacity: 0;
    }
    .page5_blood {
      width: 60%;
      top: 42%;
      left: 100%;
    }
    .page5_guangquan {
      width: 38%;
      top: 54%;
      left: 23%;
      opacity: 0;
    }
    .page5_guangquan2 {
      width: 33%;
      top: 45%;
      left: -9%;
      opacity: 0;
    }
    .page5_title {
      width: 72%;
      top: -100%;
      left: 15%;
    }
    .page5_word {
      width: 85%;
      height: 5%;
      bottom: 5%;
      left: -100%;
      font-size: 14px;
      color: #fff;
      border: 1px solid #000;
      background-color: #0d1744;
      text-align: center;
      line-height: 30px;
    }
  }
  // 第五页动画
  .page5.doIt {
    .page5_mon_gongji {
      animation: page5_moncoming 400ms linear 100ms 1 normal forwards;
    }
    .page5_me {
      animation: page5_mecoming 400ms linear 200ms 1 normal forwards;
    }
    .page5_blood {
      animation: page5_bloodcoming 400ms linear 200ms 1 normal forwards;
    }
    .bakoko {
      animation: bakoko 400ms linear 600ms 1 normal forwards;
    }
    .page5_title {
      animation: page5_title_fall 600ms linear 1100ms 1 normal forwards;
    }
    .page5_guangquan {
      animation: guangquanShow 700ms linear 1100ms 1 normal forwards;
    }
    .me_shake {
      animation: me_shake 100ms linear 1800ms infinite normal;
    }
    .page5_guangquan2 {
      animation: guangquanShow 700ms linear 2000ms 1 normal forwards;
    }
    .page5_word {
      animation: page2_word_show 400ms linear 2400ms 1 normal forwards;
    }
  }

  // 第六页
  .page6 {
    .page6_border {
      width: 35%;
      top: -100%;
      left: 33%;
    }
    .page6_guangquan{
      width: 51%;
      bottom: 2%;
      left: 25%;
      opacity: 0;
    }
    .wind{
      width: 82%;
      bottom: 2%;
      left: 9%;
      opacity: 0;
    }
    .windShake{
      width: 82%;
      bottom: 2%;
      left: 9%;
      opacity: 0;
    }
    .page6_mon_gongji{
      width: 45%;
      bottom: -100%;
      left: 32%;
    }
    .page6_mon_Shake{
      width: 45%;
      bottom: 2%;
      left: 32%;
      opacity: 0;
    }
    .boom{
      width: 42%;
      bottom: 12%;
      left: 10%;
      transform: rotate(-30deg) scale(0);
    }
    .page6_title{
      width: 80%;
      bottom: -100%;
      left: 14%;
    }
    .page6_star{
      width: 10%;
      bottom: -100%;
      left: 63%;
      background: url(../img/star2.png) no-repeat;
      background-size: 100%;
    }
    .page6_blackstar{
      width: 10%;
      bottom: 63%;
      left: 63%;
      background: url(../img/star2.png) no-repeat;
      background-size: 100%;
      opacity: 0;
    }
    .mon_talk {
      width: 28%;
      height: 15%;
      top: 18%;
      left: 68%;
      background: url("../img/left_duihuakuang2.png") no-repeat;
      text-align: center;
      line-height: 400%;
      cursor: default;
      font-size: 24px;
      transform: scale(0);
    }
    .page6_word {
      width: 70%;
      height: 5%;
      top: 12%;
      left: -100%;
      font-size: 14px;
      color: #fff;
      border: 1px solid #000;
      background-color: #0d1744;
      text-align: center;
      line-height: 30px;
    }
  }
  // 第六页动画
  .page6.doIt {
    .page6_border{
      animation: page6_fall 200ms cubic-bezier(0, 0, 0.2, 1) 0ms 1 normal forwards;
    }
    .page6_mon_gongji{
      animation: page6_moncoming 400ms linear 200ms 1 normal forwards;
    }
    .page6_guangquan{
      animation: page6_guangquanShow 1000ms linear 600ms 1 normal forwards;
    }
    .wind{
      animation: page6_guangquanShow 1000ms linear 1400ms 1 normal forwards;
    }
    .page6_title{
      animation: page6_title_fall 600ms linear 2200ms 1 normal forwards;
    }
    .page6_star{
      animation: page6_starUp 600ms linear 2800ms 1 normal forwards;
    }
    .page6_blackstar{
      animation: blackStarShow 600ms ease-out 3400ms 3 normal backwards;
    }
    .page6_Shake{
      animation: page6_shake 100ms linear 3200ms infinite normal forwards
    }
    .boom{
      animation: page6_boom 600ms linear 3000ms 1 normal forwards;
    }
    .mon_talk{
      animation: mon_talk 600ms linear 4000ms 1 normal forwards;
    }
    .page6_word {
      animation: page2_word_show 400ms linear 4200ms 1 normal forwards;
    }
  }

  // 第七页
  .page7{
    .fp-slides{
      position: relative;
    }
    .page7_one{
      overflow: hidden;
      position: relative;
    }
    .page7_two{
      overflow: hidden;
      position: relative;
      background: url("../img/bg_3.jpg");
    }
    background: url("../img/bg_heidian.png");
    background-position: center;
    .page7_top{
      width: 100%;
      height: 50%;
      background: url("../img/bg_grey.png");
      background-size: 100%;
      opacity: 0;
    }
    .page7_word{
      width: 100%;
      padding-left: 10%;
      font-size: 16px;
      background-color: #000000;
      color: #fff;
      bottom: 55%;
      left: -120%;
    }
    .page7_me{
      width: 35%;
      bottom: 45%;
      right: -100%;
      transform: rotate(-10deg);
    }
    .page7_btn{
      width: 50%;
      left: 25%;
      bottom: 10%;
      opacity: 0;
      transform: scale(0);
    }
    .page7_btn2{
      opacity: 0;
    }
    .page7_finger{
      width: 40%;
      left: 100%;
      bottom: 14%;
    }
    .page7_finger2{
      width: 40%;
      left: 73%;
      bottom: 14%;
      opacity: 0;
    }

    // 第七页副页样式
    .page7_two{
      .page7_border{
        width: 52%;
        bottom: 12%;
        left: 100%;
      }
      .mon_friends{
        width: 54%;
        bottom: 12%;
        left: 100%;
      }
      .page7_mom{
        width: 39%;
        bottom: 12%;
        left: 100%;
      }
      .mon_friends2{
        width: 54%;
        bottom: 12%;
        left: 5%;
        opacity: 0;
      }
      .page7_mom2{
        width: 39%;
        bottom: 12%;
        left: 54%;
        opacity: 0;
      }
      .mon_friends_talk{
        width: 40%;
        height: 30%;
        top: 29%;
        left: 100%;
        background: url("../img/duihuakuang5.png") no-repeat;
        background-size: 100%;
        text-align: left;
        padding: 12px;
        font-size: 14px;
        line-height: 30px;
      }
      .page7_mon_talk{
        width: 40%;
        height: 30%;
        top: 34%;
        left: 100%;
        background: url("../img/duihuakuang1.png") no-repeat;
        background-size: 100%;
        text-align: left;
        padding: 12px;
        font-size: 14px;
        line-height: 30px;
      }
      .page7_two_title{
        width: 78%;
        top: 5%;
        left: 12%;
        opacity: 0;
      }
      .page7_two_title_light{
        width: 90%;
        top: -9%;
        left: 6%;
        transform: rotate(-3deg);
        opacity: 0;
      }
      .page7_boom{
        width: 27%;
        top: 5%;
        left: 0;
        transform: rotate(-21deg);
        opacity: 0;
      }
    }
  }
  // 第七页动画
  .page7.doIt {
    .page7_word {
      animation: page7_word_coming 500ms linear 0ms 1 normal forwards;
    }
    .page7_me {
      animation: page7_mecoming 500ms linear 0ms 1 normal forwards;
    }
    .page7_top {
      animation: page7_bgcoming 2000ms linear 500ms 1 normal forwards;
    }
    .page7_btn {
      animation: page7_btn_coming 1000ms linear 2400ms 1 normal backwards;
    }
    .page7_btn2 {
      animation: page7_btn_hold 400ms linear 3400ms infinite normal;
    }
    .page7_finger {
      animation: page7_finger_coming 800ms linear 3600ms 1 normal forwards;
    }
    .page7_finger2 {
      animation: page7_finger_hold 200ms linear 4400ms infinite normal;
    }
  }
  // 第七页副业动画
  .page7_two.active{
    .page7_border{
      animation: page7_border_coming 600ms linear 0ms 1 normal forwards;
    }
    .mon_friends{
      animation: mon_friends_coming 500ms ease-in-out 200ms 1 normal forwards;
    }
    .page7_mom{
      animation: page7_mom_coming 500ms ease-in-out 250ms 1 normal forwards;
    }
    .mon_and_friends{
      animation: wobble 1000ms linear 900ms 1 normal forwards;
    }
    .mon_friends_talk{
      animation: mon_friends_talk_coming 400ms linear 900ms 1 normal forwards;
    }
    .page7_mon_talk{
      animation: mon_talk_coming 400ms linear 900ms 1 normal forwards;
    }
    .page7_two_title{
      animation: bounceInDown 600ms linear 1050ms 1 normal forwards;
    }
    .page7_boom{
      animation: bounceInDown 600ms linear 1650ms 1 normal forwards;
    }
    .page7_two_title_light{
      animation: title_light_show 400ms linear 1700ms 1 normal forwards;
    }
  }


  // 第八页
  .page8{
    .page8_title{
      width: 75%;
      left: 14%;
      top: 10%;
      transform: scale(0);
    }
    .page8_me_left{
      width: 28%;
      bottom: 0;
      left: 100%;
    }
    .page8_middle{
      width: 55%;
      bottom: 0;
      left: 25%;
      transform: scale(0);
    }
    .page8_me_right{
      width: 24%;
      bottom: 0;
      right: 100%;
    }
    .page8_bottom{
      bottom: 0;
      left: 25%;
      text-align: center;
      color: #fff;
      background-color: #000000;
    }
  }
  // 第八页动画
  .page8.doIt{
    .page8_title{
      animation: page8_title_show 800ms linear 0ms 1 normal forwards;
    }
    .page8_me_left{
      animation: page8_leftIn 600ms linear 800ms 1 normal forwards;
    }
    .page8_me_right{
      animation: page8_rightIn 600ms linear 800ms 1 normal forwards;
    }
    .page8_middle{
      animation: page8_middleIn 1400ms linear 800ms 1 normal forwards;
    }
  }

  // 第九页
  .page9{
    position: relative;
    .page9_box{
      width: 36%;
      height: 20%;
      background: url("../img/nine_bg.png") no-repeat;
      background-size: 100%;
      position: relative;
      float: left;
      margin: 30px  20px 20px;
      opacity: 0;
      .page9_box_top{
        position: relative;
        height: 85%;
        opacity: 0;
        img{
          position: absolute;
          top: 0;
          left: 0;
        }
      }
      .page9_box_bottom{
        position: relative;
        width: 97%;
        color: #FFFFFF;
        background-color: #e87474;
        border: 2px solid #000;
        text-align: center;
        opacity: 0;
        .iconfont{
          font-size: 20px;
          color: white;
        }
      }
    }
    .page9_border{
      width: 34%;
      right: 12%;
      bottom: 12%;
      opacity: 0;
    }
    .page9_mon{
      width: 28%;
      right: 8%;
      bottom: 12%;
      opacity: 0;
    }
    .page9_mon_talk{
      right: 35%;
      bottom: 38%;
      font-size: 12px;
      opacity: 0;
    }
    .page9_arrow{
      width: 25%;
      right: 32%;
      bottom: 32%;
      transform: rotate(270deg);
      opacity: 0;
    }
  }
  // 第九页动画
  .page9.doIt{
    .page9_box{
      animation: bounceInRight 800ms linear 0ms 1 normal forwards;
    }
    .page9_box_bottom{
      animation: bounceInRight 800ms linear 200ms 1 normal forwards;
    }
    .page9_box_top{
      animation: bounceInDown 800ms linear 1000ms 1 normal forwards;
    }
    .page9_border{
      animation: bounceInRight 800ms linear 1800ms 1 normal forwards;
    }
    .page9_mon{
      animation: bounceInRight 800ms linear 2000ms 1 normal forwards;
    }
    .page9_arrow{
      animation: nine_bounceInDown 800ms linear 2200ms 1 normal forwards;
    }
    .page9_mon_talk{
      animation: bounceInDown 800ms linear 2400ms 1 normal forwards;
    }

  }

  // 第十页
  .page10{
    background: url("../img/bg_sky.jpg") no-repeat;
    background-size: 100% 100%;
    .page10_title{
      top: 25%;
      left: 40%;
      p{
        width: 100%;
        text-align: center;
        color: #fff;
        font-size: 16px;
      }
    }
    .page10_img{
      background-color: #fff;
      text-align: center;
      vertical-align: middle;
      padding-top: 5px;
      top: 40%;
      left: 30%;
      img{
        width: 90%;
        height: 90%;
      }
    }
    .page10_word{
      border-radius: 40px;
      padding: 2px 30px;
      text-align: center;
      background-color: rgba(0,0,0,0.6);
      bottom: 10%;
      left: 25%;
      a{
        color: #56c1f1;
      }
    }
    .page10_report{
      bottom: 10%;
      left: 5%;
      opacity: 0;
      a{
          color: #cccccc;
      }
    }
  }
  // 第十页动画
  .page10.doIt{
    .page10_report{
      animation: report_show 800ms linear 0ms 1 normal forwards;
    }
  }
}


//背景音乐旋转
@keyframes rotating {
  0%{
    transform: rotateZ(0deg);
  }
  100%{
    transform: rotateZ(360deg);
  }
}

// 第一页动画
@keyframes shake {
  0%{
    transform: translateX(0);
  }
  50%{
    transform: translateX(1px);
  }
  100%{
    transform: translateX(-1px);
  }
}
@keyframes fall {
  80%{
    top: 35%;
  }
  90%{
    top: 30%;
  }
  95%{
    top: 34%;
  }
  98%{
    top: 32%;
  }
  100%{
    top: 30%;
  }
}
@keyframes left_go {
  0%{
    opacity: 1;
  }
  100%{
    opacity: 0.5;
    left: 0;
  }
}
@keyframes right_go {
  0%{
    opacity: 1;
  }
  100%{
    opacity: 0.5;
    right: 0;
  }
}
@keyframes fangda {
  0%{
    opacity: 1;
    transform: scale(1);
  }
  100%{
    opacity: 0;
    transform: scale(3);
  }
}
@keyframes title_fangda {
  0%{
    opacity: 0;
    transform: scale(3);
  }
  100%{
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes cir_show {
  0%{
    opacity: 1;
    transform: scale(1);
  }
  40%{
    opacity: 1;
    transform: scale(1.2);
  }
  60%{
    opacity: 1;
    transform: scale(1);
  }
  80%{
    opacity: 1;
    transform: scale(1.1);
  }
  100%{
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes word_fall1 {
  0%{
    opacity: 1;
  }
  100%{
    opacity: 1;
    top: 0;
  }
}
@keyframes word_fall2 {
  0%{
    opacity: 1;
  }
  100%{
    opacity: 1;
    top: 40%;
  }
}

// 第二页动画
@keyframes page2_fall {
  80%{
    top: 30%;
  }
  90%{
    top: 28%;
  }
  95%{
    top: 29%;
  }
  98%{
    top: 28%;
  }
  100%{
    top: 26%;
  }
}
@keyframes page2_muncoming {
  70%{
    left: 46%;
  }
  85%{
    left: 6%;
  }
  100%{
    left: 28%;
  }
}
@keyframes aDa {
  70%{
    left: 80%;
  }
  85%{
    left: 44%;
  }
  100%{
    left: 60%;
  }

}
@keyframes page2_dafei {
  70%{
    left: 5%;
  }
  85%{
    left: 15%;
  }
  100%{
    left: 10%;
  }
}
@keyframes page2_phonefei {
  70%{
    left: 10%;
  }
  85%{
    left: 25%;
  }
  100%{
    left: 20%;
  }
}
@keyframes page2_title_fall {
  70%{
    top: 30%;
  }
  85%{
    top: 16%;
  }
  100%{
    top: 23%;
  }
}
@keyframes tuxue {
  0%{
    opacity: 0;
  }
  50%{
    opacity: 1;
    transform: scale(1.2);
  }
  80%{
    opacity: 1;
    transform: scale(0.8);
  }
  100%{
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes page2_word_show {
  70%{
    left: 8%;
  }
  85%{
    left: -8%;
  }
  100%{
    left: 0;
  }
}

// 第三页动画
@keyframes page3_fall {
  80%{
    top: 41%;
  }
  90%{
    top: 36%;
  }
  95%{
    top: 39%;
  }
  98%{
    top: 37%;
  }
  100%{
    top: 38%;
  }
}
@keyframes page3_mecoming {
  70%{
    left: 45%;
  }
  85%{
    left: 5%;
  }
  100%{
    left: 25%;
  }
}
@keyframes page3_hanshow {
  0%{
    transform: scale(0);
  }
  80%{
    transform: scale(1.4);
  }
  90%{
    transform: scale(0.6);
  }
  100%{
    transform: scale(1);
  }
}
@keyframes page3_shadowShow {
  70%{
    left: 30%;
  }
  85%{
    left: 10%;
  }
  100%{
    left: 20%;
  }
}
@keyframes page3_momcoming {
  70%{
    left: 15%;
  }
  85%{
    left: -30%;
  }
  100%{
    left: -15%;
  }
}
@keyframes page3_title_fall {
  70%{
    top: 22%;
  }
  85%{
    top: 8%;
  }
  100%{
    top: 15%;
  }
}
@keyframes page3_guangquanda {
  0%{
    transform: scale(0);
  }
  100%{
    transform: scale(1);
  }
}
@keyframes page3_flashShake {
  0%{
    opacity: 1;
    transform: translateX(0);
  }
  50%{
    opacity: 1;
    transform: translateX(2px);
  }
  100%{
    opacity: 1;
    transform: translateX(-2px);
  }
}

// 第四页动画
@keyframes page4_fall {
  80%{
    top: 55%;
  }
  90%{
    top: 45%;
  }
  95%{
    top: 52%;
  }
  98%{
    top: 48%;
  }
  100%{
    top: 50%;
  }
}
@keyframes page4_momcoming {
  70%{
    left: 5%;
  }
  85%{
    left: -15%;
  }
  100%{
    left: -10%;
  }
}
@keyframes BAoo_coming {
  70%{
    left: 13%;
  }
  85%{
    left: 0;
  }
  100%{
    left: 8%;
  }
}
@keyframes page4_mecoming {
  70%{
    left: 30%;
  }
  85%{
    left: 20%;
  }
  100%{
    left: 25%;
  }
}
@keyframes page4_gostshow {
  0%{
    opacity: 1;
    transform: scale(1);
  }
  100%{
    opacity: 0;
    transform: scale(4);
  }
}
@keyframes page4_title_fall {
  70%{
    top: 26%;
  }
  85%{
    top: 10%;
  }
  100%{
    top: 18%;
  }
}
@keyframes monshadow {
  70%{
    left: 3%;
  }
  85%{
    left: -7%;
  }
  100%{
    left: -2%;
  }
}
@keyframes meshadow {
  70%{
    left: 60%;
  }
  85%{
    left: 50%;
  }
  100%{
    left: 55%;
  }
}

// 第五页动画
@keyframes page5_moncoming {
  70%{
    left: 20%;
  }
  85%{
    left: 7%;
  }
  100%{
    left: 12%;
  }
}
@keyframes page5_mecoming {
  70%{
    left: -28%;
  }
  85%{
    left: -15%;
  }
  100%{
    left: -22%;
  }
}
@keyframes page5_bloodcoming {
  70%{
    left: 30%;
  }
  85%{
    left: 6%;
  }
  100%{
    left: 17%;
  }
}
@keyframes bakoko {
  70%{
    left: 40%;
  }
  85%{
    left: 80%;
  }
  100%{
    left: 60%;
  }
}
@keyframes guangquanShow {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes me_shake {
  0%{
    opacity: 1;
    transform: translateX(0);
  }
  50%{
    opacity: 1;
    transform: translateX(1px);
  }
  100%{
    opacity: 1;
    transform: translateX(-1px);
  }
}
@keyframes page5_title_fall {
  70% {
    top: 35%;
  }
  85% {
    top: 15%;
  }
  100% {
    top: 25%;
  }
}

// 第六页动画
@keyframes page6_fall {
  80%{
    top: 45%;
  }
  90%{
    top: 35%;
  }
  95%{
    top: 42%;
  }
  98%{
    top: 38%;
  }
  100%{
    top: 40%;
  }
}
@keyframes page6_moncoming {
  70%{
    bottom: 6%;
  }
  85%{
    bottom: -2%;
  }
  100%{
    bottom: 2%;
  }
}
@keyframes page6_guangquanShow {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes page6_shake {
  0%{
    opacity: 1;
    transform: translateX(0);
  }
  50%{
    opacity: 1;
    transform: translateX(1px);
  }
  100%{
    opacity: 1;
    transform: translateX(-1px);
  }
}
@keyframes page6_title_fall {
  70%{
    bottom: 26%;
  }
  85%{
    bottom: 14%;
  }
  100%{
    bottom: 20%;
  }
}
@keyframes page6_starUp {
  70%{
    bottom: 66%;
  }
  85%{
    bottom: 60%;
  }
  100%{
    bottom: 63%;
  }
}
@keyframes blackStarShow {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes page6_boom {
  70%{
    transform: rotate(-30deg) scale(1.4);
  }
  85%{
    transform: rotate(-30deg) scale(0.6);
  }
  100%{
    transform: rotate(-30deg) scale(1);
  }
}
@keyframes mon_talk {
  70%{
    transform: scale(1.4);
  }
  85%{
    transform: scale(0.6);
  }
  100%{
    transform: scale(1);
  }
}

// 第七页动画
@keyframes page7_word_coming {
  70%{
    left: -6%;
  }
  85%{
    left: 6%;
  }
  100%{
    left: 0;
  }
}
@keyframes page7_mecoming {
  70%{
    right: 15%;
  }
  85%{
    right: 5%
  }
  100%{
    right: 10%;
  }
}
@keyframes page7_bgcoming {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes page7_btn_coming {
  0%{
    transform: scale(0);
    opacity: 0;
  }
  70%{
    transform: scale(1.2);
    opacity: 1;
  }
  80%{
    transform: scale(0.8);
    opacity: 1;
  }
  85%{
    transform: scale(1);
    opacity: 1;
  }
  100%{
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes page7_btn_hold {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
  10%, 20% {
    opacity: 1;
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes page7_finger_coming {
  70%{
    left: 63%;
  }
  85%{
    left: 83%;
  }
  100%{
    left: 73%;
  }
}
@keyframes page7_finger_hold {
  0%{
    opacity: 1;
    transform: translateX(0);
  }
  100%{
    opacity: 1;
    transform: translateX(-7px);
  }
}
@keyframes page7_border_coming {
  70%{
    left: 20%;
  }
  85%{
    left: 30%;
  }
  100%{
    left: 25%;
  }
}
@keyframes mon_friends_coming {
  70%{
    left: -10%;
  }
  85%{
    left: 20%;
  }
  99%{
    left: 4%;
  }
  100%{
    left: 5%;
  }
}
@keyframes page7_mom_coming {
  70%{
    left: 34%;
  }
  85%{
    left: 74%;
  }
  99%{
    left: 53%;
  }
  100%{
    left: 54%;
  }
}
@keyframes mon_friends_talk_coming {
  70%{
    left: -1%;
  }
  85%{
    left: 11%;
  }
  100%{
    left: 6%;
  }
}
@keyframes mon_talk_coming {
  70%{
    left: 45%;
  }
  85%{
    left: 55%;
  }
  100%{
    left: 50%;
  }
}
@keyframes wobble {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    opacity: 1;
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    opacity: 1;
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    opacity: 1;
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    opacity: 1;
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    opacity: 1;
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes title_light_show {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

// 第八页动画
@keyframes page8_title_show {
  0%{
    transform: scale(0);
  }
  100%{
    transform: scale(1);
  }
}
@keyframes page8_leftIn {
  0%{
    left: 100%;
    bottom: 0;
  }
  70%{
    left: 3%;
    bottom: 17%;
  }
  85%{
    left: 8%;
    bottom: 13%;
  }
  100%{
    left: 5%;
    bottom: 15%;
  }
}
@keyframes page8_rightIn {
  0%{
    right: 100%;
    bottom: 0;
  }
  70%{
    right: 2%;
    bottom: 17%;
  }
  85%{
    right: 8%;
    bottom: 11%;
  }
  100%{
    right: 5%;
    bottom: 13%;
  }
}
@keyframes page8_middleIn {
  0%{
    bottom: 0;
    transform: scale(0) rotate(0);
  }
  20%{
    bottom: 17%;
    transform: scale(0.8) rotate(0);
  }
  40%, 80%{
    bottom: 17%;
    transform: scale(1.2) rotate(-5deg);
  }
  50%, 70%{
    bottom: 17%;
    transform: scale(1.1) rotate(0);
  }
  60%, 90%{
    bottom: 17%;
    transform: scale(1) rotate(5deg);
  }
  100%{
    bottom: 17%;
    transform: scale(1) rotate(0);
  }
}

// 第九页动画
@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    opacity: 1;
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes nine_bounceInDown {
  from, 60%, 75%, 90%, to {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) rotate(270deg);
    transform: translate3d(0, -3000px, 0) rotate(270deg);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) rotate(270deg);
    transform: translate3d(0, 25px, 0) rotate(270deg);
  }
  75% {
    opacity: 1;
    -webkit-transform: translate3d(0, -10px, 0) rotate(270deg);
    transform: translate3d(0, -10px, 0) rotate(270deg);
  }
  90% {
    opacity: 1;
    -webkit-transform: translate3d(0, 5px, 0) rotate(270deg);
    transform: translate3d(0, 5px, 0) rotate(270deg);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) rotate(270deg);
    transform: translate3d(0, 0, 0) rotate(270deg);
  }
}

// 第十页动画
@keyframes report_show {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}